<template>
    <div>
        <input type="text" v-model="message" :placeholder="placevalue"></input>
        <button @click="sendMessage">Send</button><br />
        API method: {{apivalue}}<br />
        Internal Placevalue: {{intervalplace}}<br />
    </div>
</template>

<script>
export default {
    name: 'Sub',
    data() {
        return {
            message: '',
            apivalue: '',
            internalvalue: 'apiset',            // 二、子组件暴露给父组件的数据
            intervalplace: this.placevalue      // 四、子组件可以用一个数据对应输入的props
        }
    },
    methods: {
        sendMessage() {
            this.$emit('inputMessage', this.message)        // 一、向父组件传递事件，以及事件的参数
            this.message = ''
        },
        apiMethod(value){                        // 二、子组件暴露给父组件的方法
            this.apivalue = value       
        },
    },
    // props: [
    //     'placevalue'        // 三、子组件接收父组件的props
    // ]
    props: {
        placevalue: {           // 三、子组件接收父组件的props，这里使用对象形式，可以设置默认值和类型
                                // 注：不要直接修改props数据，因为这个数据会被父组件修改掉
            type: String,
            default: ''
        }
    },
    watch: {
        placevalue: {               // 四、通过watch可以监控prop的变化
            handler(newVal){
                this.intervalplace = newVal
            },
            immediate: true
        }
    }

}
</script>

<style scoped>
</style>
